<template>
    <div class="jie-video">
        <div class="video-content" v-for="(item,index) in zaoList" :key="index">
            <a href="javascript:;">
                <div class="cover">
                    <img :src="item.cover" alt="">
                    <ul class="read">
                        <li>{{ item.count_read }}人观看</li>
                        <li>{{ item.publish_time }}</li>
                    </ul>
                </div>
                <dl>
                    <dt>
                        <h3>{{ item.title }}</h3>
                    </dt>
                    <dd>
                        <span>{{ item.price }}</span>
                    </dd>
                </dl>
                <ul class="video-list">
                    <li>
                        <img src="/static/images/comment.png" alt="">
                        <span>{{ item.count_comments }}</span>
                    </li>
                    <li>
                        <img src="/static/images/zan.png" alt="">
                        <span>{{ item.count_like }}</span>
                    </li>
                    <li>
                        <img src="/static/images/share.png" alt="">
                    </li>
                </ul>
            </a>
        </div>
    </div>
</template>

<script>
export default {
    props: ['zaoList']
}
</script>

<style>
.jie-video .video-content {
    background:rgba(255,255,255,1);
    box-shadow:0px 0.15rem 0.3rem 0px rgba(233,235,238,0.8);
    border-radius:8px;
    margin-bottom: 0.6rem;
}
.jie-video .video-content a .cover {
    width: 6.78rem;
    height: 3.86rem;
    position: relative;
    z-index: 1;
}
.jie-video .video-content a .cover img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}
.jie-video .video-content a .read {
    position: absolute;
    width: 6.78rem;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    bottom: 0;
    height:1rem;
    background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
}
.jie-video .video-content a .read li {
    font-size: 0.28rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height: 0.4rem;
}
.jie-video .video-content a dl {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0.2rem;
    border-bottom: 1px solid rgba(240,242,245,1);
}
.jie-video .video-content a dl dt h3 {
    font-size: 0.36rem;
    font-family:PingFangSC-Semibold;
    font-weight:600;
    color:rgba(51,51,51,1);
    line-height: 0.5rem;
    width: 4.28rem;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.jie-video .video-content a dl dd span {
    font-size: 0.28rem;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:rgba(255,60,84,1);
    line-height: 0.4rem;
}
.jie-video .video-content a .video-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.26rem 0.6rem;
}
.jie-video .video-content a .video-list li {
    display: flex;
    align-items: center;
}
.jie-video .video-content a .video-list li img {
    width: 0.48rem;
    height: 0.48rem;
}
.jie-video .video-content a .video-list li span {
    font-size: 0.28rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(176,176,185,1);
    line-height: 0.28rem;
    margin-left: 0.12rem;
}
</style>
